import CURDHelper from '@/utils/CURDHelper'
import { VxeUI } from 'vxe-pc-ui';
import PageConfig from '@/utils/pageConfig'
import Query from '@/components/Query'
import XEUtils from 'xe-utils'

export default {
  name: 'ReportFinance',
  components: {
    Query
  },
  data() {
    return {
      baseApiUrl: '/api/Report',
      componentSize: PageConfig.ComponentSize,
      duration: PageConfig.Duration,
      QueryConditions: [],
      QueryConfig: [{
        title: '客户名称',
        field: 'khmc',
        type: 'input',
        value: '',
        placeholder: '请输入客户名称以查询',
      }, {
        title: '合同签订日期',
        field: 'htqdrq',
        type: 'daterange',
        value: '',
        date1: new Date(),
        date2: new Date(),
        placeholder1: '请选择开始日期',
        placeholder2: '请选择结束日期',
      },
      ],
      GridOptions: {
        id: 'ReportFinance_MainGrid',
        border: true,
        stripe: true,
        loading: false,
        size: PageConfig.ComponentSize,
        height: 300,
        showFooter: true,
        columnConfig: {
          resizable: true
        },
        rowConfig: {
          isHover: true,
          isCurrent: true
        },
        checkboxConfig: {
          highlight: true,
          range: true
        },
        customConfig: {
          mode: 'drawer',
          storage: true
        },
        footerData: [{
          htje: 0,
          yskje: 0,
          sjskje: 0
        }],
        columns: [
          { type: 'seq', width: 50 },
          { type: 'checkbox', width: 35 },
          { field: 'khmc', title: '客户名称', sortable: true, minWidth: 120, showOverflow: true },
          { field: 'txmc', title: '体系名称', sortable: true, minWidth: 120, showOverflow: true },
          { field: 'txgg', title: '体系规格', minWidth: 100, showOverflow: true },
          { field: 'htje', title: '合同金额', minWidth: 80, showOverflow: true },
          { field: 'yskje', title: '应收款', minWidth: 80, showOverflow: true },
          { field: 'sjskje', title: '已收款', minWidth: 80, showOverflow: true },
          { field: 'rzbz', title: '认证标准', minWidth: 120, showOverflow: true },
          { field: 'erpbh', title: 'ERP编号', minWidth: 100, showOverflow: true },
          { field: 'sxq', title: '市县区', minWidth: 120, showOverflow: true },
          { field: 'shlx', title: '审核类型', minWidth: 100, showOverflow: true },
          { field: 'rzfw', title: '认证范围', minWidth: 100, showOverflow: true },
          { field: 'txrs', title: '体系人数', minWidth: 80, showOverflow: true },
          { field: 'csje', title: '初审金额', minWidth: 80, showOverflow: true },
          { field: 'jsje', title: '监审金额', minWidth: 80, showOverflow: true },
          {
            field: 'htqdrq', title: '签单日期', sortable: true, minWidth: 120, showOverflow: true,
            formatter: ({ cellValue }) => XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
          },
        ],
        data: []
      },
      PagerConfig: {
        align: 'center',
        pageSize: 25,
        total: 0,
        currentPage: 1,
        pageSizes: [10, 25, 50, 100, 200],
      },
    }
  },
  created() {
    //this.InitOrder();
  },
  mounted(){
    this.DoInitOrder();
    this.DoInitReceive();
    this.DoInitExpenses();
  },
  methods: {
    handleOrderRefresh() {
      this.DoInitOrder();
    },
    handleReceiveRefresh() {
      this.DoInitReceive();
    },
    handleExpensesRefresh() {
      this.DoInitExpenses();
    },
    handleQuery(e) {
      this.QueryConditions = e;
      this.DoQuery(e);
    },
    handlePageChange() {
      this.DoQuery(this.QueryConditions);
    },
    DoQuery(e) {
      let request = {
        isPaging: true,
        pageSize: this.PagerConfig.pageSize,
        pageIndex: this.PagerConfig.currentPage,
        queryConditions: e,
        orderByConditions: [{ column: 'htqdrq', condition: 'desc' }]
      }
      CURDHelper.Query(request, `${this.baseApiUrl}/GetOrderReport`)
        .then(res => {
          this.GridOptions.data = res.data;
          this.PagerConfig.total = res.totalNumber;
          this.DoUpdateSummary();
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })
    },
    DoInitOrder() {
      CURDHelper.Get(`${this.baseApiUrl}/GetOrderData`)
        .then(res => {
          let myChart = this.$echarts.init(this.$refs.orderChart);
          myChart.setOption({
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [
              {
                name: '订单金额',
                type: 'bar',
                data: res.data
              }
            ]
          });
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })

    },
    DoInitReceive() {
      CURDHelper.Get(`${this.baseApiUrl}/GetReceiveData`)
        .then(res => {
          let myChart = this.$echarts.init(this.$refs.receiveChart);
          myChart.setOption({
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [
              {
                name: '收款金额',
                type: 'bar',
                data: res.data
              }
            ]
          });
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })

    },
    DoInitExpenses() {
      CURDHelper.Get(`${this.baseApiUrl}/GetExpensesData`)
        .then(res => {
          let myChart = this.$echarts.init(this.$refs.expensesChart);
          myChart.setOption({
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {},
            series: [
              {
                name: '开支金额',
                type: 'bar',
                data: res.data
              }
            ]
          });
        }).catch(err => {
          VxeUI.modal.message({
            content: err,
            status: 'error',
            duration: this.duration
          })
        })

    },
    DoUpdateSummary() {
      this.GridOptions.footerData[0].htje = this.DoSum(this.GridOptions.data, 'htje');
      this.GridOptions.footerData[0].yskje = this.DoSum(this.GridOptions.data, 'yskje');
      this.GridOptions.footerData[0].sjskje = this.DoSum(this.GridOptions.data, 'sjskje');
    },
    DoSum(list, field) {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count.toFixed(2)
    },
    GetOrderData() {

    }

  }
}
